<script setup lang="ts">
import { ref, onMounted } from 'vue'
// import { DynamicForm, DynamicChart, DirectorySelector, IconButton, SVGIcon, DraggingCanvas, DataVisualizationLargeScreen, DatabaseBrowser, BasicTableShow, RealtimeTerminal } from "./components"
import { DynamicForm, DataVisualizationLargeScreen, RealtimeTerminalTabs } from "./components"
import { createWebSocket, jsonRequest } from "./requests"
import { ElNotification, ElIcon, ElTabPane, ElTabs } from "element-plus"
import { ParamValuesType, ParamsType } from './components/dynamic-form/models';
import { Upload } from "@element-plus/icons-vue"
import FileTree from "./components/file-tree/FileTree.vue"

defineProps<{ msg: string }>()

const dynamicForm = ref<InstanceType<typeof DynamicForm> | null>(null)
const dataVisualizationLargeScreen = ref<InstanceType<typeof DataVisualizationLargeScreen> | null>(null)
const activeName = ref("terminal")
// const activeName = ref("BasicTableShow")
let timer: number = -1
onMounted(() => {
  jsonRequest.get("/api/dynamic_form/initial_data").then((res: { model: ParamsType[], values: ParamValuesType }) => {
    if (dynamicForm.value == null) {
      console.error("dynamicForm.value is null")
      return
    }
    dynamicForm.value.setupModels(res.model)
    dynamicForm.value.setupValues(res.values)
  }).catch((err) => {
    ElNotification.error({
      title: "Error",
      message: err.message
    })
  })
  timer = window.setTimeout(() => {
    if (dataVisualizationLargeScreen.value == null) {
      console.error("dynamicForm.value is null")
      return
    }
    dataVisualizationLargeScreen.value.renderLargeScreen()
  }, 2000)
}
)

</script>
<style lang="css">
.sci-ui-dragging-canvas {
  height: 100%;
  width: 100%;
}

.el-tab-pane {
  height: 100%;
}

.demo-tabs {
  height: 100%;
}

.el-tabs__content {
  /* 15px是el-tabs-header */
  height: calc(100% - var(--el-tabs-header-height) - 15px);
}
</style>
<template>
  <!-- <ElTabs v-model="activeName" class="demo-tabs" :lazy="true">
    <ElTabPane label="terminal" name="terminal">
      <RealtimeTerminalTabs :termID="'ddddd'"/>
    </ElTabPane> -->
    <!-- <ElTabPane label="Basics" name="basics">
      <IconButton :tooltip="'Upload file demo button'">
        <el-icon>
          <Upload> </Upload>
        </el-icon>
      </IconButton>
    </ElTabPane>
    <ElTabPane label="Data Visualization" name="data-visualization">
      <DataVisualizationLargeScreen ref="dataVisualizationLargeScreen"
        :componentName="'data-visualization-large-screen'">
      </DataVisualizationLargeScreen>
    </ElTabPane>
    <ElTabPane label="Files Components" name="files-components">
      <FileTree></FileTree>
      <DirectorySelector :url="'/api/local-directory_selector'" />
    </ElTabPane>
    <ElTabPane label="Form Components" name="form-components">
      <DynamicForm ref="dynamicForm"> </DynamicForm>
    </ElTabPane>
    <ElTabPane label="Dynamic-chart" name="dynamic-chart">
      <DynamicChart />
    </ElTabPane>
    <ElTabPane label="DBBrowser" name="DBBrowser">
      <DatabaseBrowser />
    </ElTabPane>
    <ElTabPane label="BasicTableShow" name="BasicTableShow">
      <BasicTableShow />
    </ElTabPane> -->
  <!-- </ElTabs> -->

  <router-view></router-view>



</template>

<style scoped>
.read-the-docs {
  color: #888;
}

.draggable-content {
  height: 200px;
  width: 300px;
  background: #aa0000;
  user-select: none;
}
</style>
